<template>
	<view>
		<uamhead :title="title"></uamhead>
		<scroll-view scorll-y="true" class="scroll-Y">
			<view v-show="isShow" class="list-music-title">
				<text class="iconfont iconbofang1"></text>
				<text>播放全部</text>
				<text>(共{{ playlist.trackCount }}首)</text>
			</view>
			<view class="list-music">
				<view class="list-music-item" v-for="(item,index)
				 in playlist.tracks" :key="item.id" @tap="navPlayer(item.id)">
				 <view class="list-music-top">{{index+1}}</view>
				 <view class="list-music-song">
					 <view>{{item.name}}</text></view>
			<view><image v-if="privileges[index].flag >60 && privileges[index].flag<70"
			src="../../static/dujia.png" mode=""></image>
			<image v-if="privileges[index].maxbr == 999000" src="../../static/sq.png" mode=""></image>	
			{{item.ar[0].name}} - {{item.name}}
			</view>
				 </view>
				 </view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {listDetail} from '../../common/api.js'
	export default {
		data() {
			return {
				title:"飙升榜",
				playlist:{
					coverImgUrl:'',
					trackCount:'',
					creator:''
				},
				privileges:[],
				isShow : false
			}
		},
		onLoad(option){
			let listId=option.listid
			listDetail(listId).then(res =>{
				if(res.data.code=='200'){
					this.title=res.data.playlist.name
					this.playlist=res.data.playlist
					this.privileges=res.data.privileges
					this.isShow=true
				}
			})
		},
		methods: {
			navPlayer(id){
				uni.navigateTo({
					url:'/pages/player/player?songId='+id,
				});
			}
		}
	}
</script>
<style>
.list-head{ display: flex; margin:30rpx;}
	.list-head-img{ width:265rpx; height:265rpx; border-radius: 15rpx;
	 margin-right:40rpx; overflow: hidden; position: relative;}
	.list-head-img image{ width:100%; height:100%;}
	.list-head-img text{ position: absolute; font-size:26rpx; color:black; right:8rpx; top:8rpx;}
	.list-head-text{ flex:1; font-size:24rpx; color:blue;}
	.list-head-text image{ width:25rpx; height:26rpx; border-radius: 50%;}
	
	.list-music{ background:yellowgreen; border-radius: 50rpx; overflow: hidden; margin-top:45rpx;}
	.list-music-item{ display: flex; margin:0 30rpx 70rpx 44rpx; align-items: center;}
	.list-music-top{ width:56rpx; font-size:28rpx; color:darkblue;}
	.list-music-song{ flex:1; line-height: 40rpx;}
	
	
	.list-music-title{ height:58rpx; line-height: 58rpx; margin:30rpx 30rpx 70rpx 30rpx;}
	
	.list-music-song image{ width:34rpx; height:22rpx; margin-right:10rpx;}
</style>
